<template>
  <el-popover
    placement="right"
    width="330"
    trigger="click"
  >
    <ul class="ullist">
      <li v-for="(item, index) in gridData" :key="index"><a target="_blank" :href="item.url"> {{ index + 1 }}.&nbsp;{{ item.fileName }} </a>
        <i v-if="item.view" class="el-icon-view" />
      </li>
    </ul>
    <span slot="reference" style="display: block">课 件</span>
  </el-popover>
</template>

<script>
export default {
  props: {
    periodId: {
      type: Number,
      default: 0
    },
    attachments: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // suffixName: ['pdf', 'doc'],
      suffixName: [],
      gridData: []
    }
  },
  mounted() {
    try {
      if (this.attachments != null && this.attachments.length > 2) {
        this.gridData = JSON.parse(this.attachments)
      }

      for (let i = 0; i < this.gridData.length; i++) {
        const _fileName = this.gridData[i].fileName
        const _suffixName = this.getFileSuffixName(_fileName)

        this.gridData[i].view = false
        for (let j = 0; j < this.suffixName.length; j++) {
          if (this.suffixName[j] === _suffixName) {
            // 支持预览
            this.gridData[i].view = true
          }
        }
      }
    } catch (e) {
      console.log(e)
    }
  },
  methods: {
    getFileSuffixName(fileName) {
      try {
        const ret = fileName.substr(fileName.lastIndexOf('.') + 1).toLowerCase()
        return ret
      } catch (e) {
        console.log(e)
      }
      return ''
    }
  }
}
</script>
<style>
.ullist {

}
.ullist li {
  padding-top: 10px;
  padding-bottom: 10px;

  &:hover {
    background: rgb(242, 242, 242);
  }
}

.ullist li a {
  margin-left: 10px;

  &:hover {
     cursor: pointer;
  }
}

.ullist li i {
  float: right;
  margin-right: 10px;

  &:hover {
    cursor: pointer;
    colr: #d51423;
  }
}
</style>
